{% load static %}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>天天生鲜-登录</title>
    <link rel="stylesheet" type="text/css" href="{% static 'css/reset.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'css/main.css' %}">
</head>
<body>
<div class="login_top clearfix">
    <a href="{% url 'hmsx:index' %}" class="login_logo"><img src="{% static 'img/logo02.png' %}"></a>
</div>

<div class="login_form_bg" style="position: relative">
    <div class="login_form_wrap clearfix">
        <div class="login_banner fl"></div>
        <div class="slogan fl">日夜兼程 · 急速送达</div>
        <div class="login_form fr">
            <div class="login_title clearfix">
                <h1>用户登录</h1>
                <a href="{% url 'hmsx:register' %}">立即注册</a>
            </div>
            <div class="form_input">
                <input type="text" name="username" id="username" class="name_input required" placeholder="请输入用户名">
                <div class="user_error" id="user_error"></div>
                <input type="password" name="pwd" id="pwd" class="pass_input required" placeholder="请输入密码">
                <div class="pwd_error" id="pwd_error"></div>
                <div class="more_input clearfix">
                    <input type="checkbox" name="remember">
                    <label>记住用户名</label>
                    <a href="#">忘记密码</a>
                </div>
                <div id="submit" class="input_submit" align="center">登录</div>
                <p id="login_err" class="err" style="margin-top: 150px;position: absolute"></p>
            </div>
        </div>
    </div>
</div>

<div class="footer no-mp">
    <div class="foot_link">
        <a href="#">关于我们</a>
        <span>|</span>
        <a href="#">联系我们</a>
        <span>|</span>
        <a href="#">招聘人才</a>
        <span>|</span>
        <a href="#">友情链接</a>
    </div>
    <p>CopyRight © 2016 北京天天生鲜信息技术有限公司 All Rights Reserved</p>
    <p>电话：010-****888 京ICP备*******8号</p>
</div>

<script type="text/javascript" src="{% static 'js/jquery-1.12.4.min.js' %}"></script>
<script type="text/javascript">
    $(function () {
        var user = $('#username');
        var pwd = $('#pwd');
        var user_error = $('#user_error');
        var pwd_error=$('#pwd_error');

        checked_user = false;
        checked_pwd = false;
        user.blur(function () {
            if (user.val()) {
                checked_user = true;
            } else {
                user_error.css('display', 'inline-block').html('用户名不能为空')
            }
        }).click(function () {
            user_error.css('display', 'none');
            $('#login_err').css({'display': 'block', 'color': 'red'}).html('')
        });
        pwd.blur(function () {
            if (pwd.val()) {
                checked_pwd = true
            } else {
                pwd_error.css('display', 'inline-block').html('密码不能为空')
            }
        }).click(function () {
            pwd_error.css('display', 'none');
            $('#login_err').css({'display': 'block', 'color': 'red'}).html('')
        });

        $('#submit').click(function () {
            user.blur();
            pwd.blur();
            if (checked_pwd === true && checked_user === true) {
                $.ajax({
                    url: "{% url 'hmsx:login' %}",
                    type: 'post',
                    dataType: 'json',
                    data: {
                        username: user.val(),
                        pwd: pwd.val(),
                    },
                    success: function (data) {
                        if (data['result']) {
                            $('#login_err').css({'display': 'block', 'color': 'red'}).html(data['result'])
                        } else {
                            window.location.href = "{% url 'hmsx:index' %}"
                        }
                    }
                })
            } else {
                $('#login_err').css({'display': 'block', 'color': 'red'}).html('')
            }

        });
    })
</script>

</body>
</html>